import React, { Component,PureComponent} from 'react'

// export default class Parent extends Component {
//     state = {
//         count:1
//     }
//     render() {
//         console.log('parent render')
//         return (
//             <div>
//                 Parent：{this.state.count}
//                 <br />
//                 <button onClick={this.add}>+1</button>
//                 <Child count={this.state.count}/>
//             </div>
//         )
//     }
//     // 父组件更新，子组件自动更新
//     add = ()=>{
//         const {count} = this.state
//         this.setState({count:count+1})
//     }
// }

// class Child extends Component {
//     render() {
//         console.log('child render')
//         return (
//             <div>
//                 ------ Child {this.props.count}
//             </div>
//         )
//     }
// }







// export default class Parent extends Component {
//     state = {count:1}
//     render() {
//         console.log('parent render')
//         return (
//             <div>
//                 Parent：{this.state.count}
//                 <br />
//                 <button onClick={this.add}>+1</button>
//                 <Child/>
//             </div>
//         )
//     }
//     // Component 中调用 setState 一定会 render，另外还会调用子组件的 render
//     add = ()=>{
//         this.setState({})
//     }
// }

// class Child extends Component {
//     render() {
//         console.log('child render')
//         return (
//             <div>
//                 ------ Child
//             </div>
//         )
//     }
// }


// export default class Parent extends Component {
//     state = {count:1}
//     render() {
//         console.log('parent render')
//         return (
//             <div>
//                 Parent：{this.state.count}
//                 <br />
//                 <button onClick={this.change}>change</button>
//                 <button onClick={this.add}>add</button>
//                 <Child count={2}/>
//             </div>
//         )
//     }
//     shouldComponentUpdate(nextProps,nextState){
//         // console.log(nextProps,nextState) // 目标
//         // console.log(this.state,this.props) // 当前的
//         // console.log( this.state.count !== nextState.count)
//         return this.state.count !== nextState.count
//     }
//     change = ()=>{
//         this.setState({})
//     }
//     add = ()=>{
//         const {count} = this.state
//         this.setState({count:count+1})
//     }
// }

// class Child extends Component {
//     shouldComponentUpdate(nextProps,nextState){
//         return this.props.count !== nextProps.count
//     }
//     render() {
//         console.log('child render')
//         return (
//             <div>
//                 ------ Child {this.props.count}
//             </div>
//         )
//     }
// }


// PureComponent 内置了 shouldComponentUpdate 的对比逻辑
// 但是只做了浅层对比，如果指向同一个对象视为不变
export default class Parent extends PureComponent {
    state = {count:1}
    render() {
        console.log('parent render')
        return (
            <div>
                Parent：{this.state.count}
                <br />
                <button onClick={this.change}>change</button>
                <button onClick={this.add}>add</button>
                <Child count={2}/>
            </div>
        )
    }
    change = ()=>{
        this.setState({})
    }
    add = ()=>{
        const {count} = this.state
        this.setState({count:count+1})
    }
}

class Child extends PureComponent {
    render() {
        console.log('child render')
        return (
            <div>
                ------ Child {this.props.count}
            </div>
        )
    }
}